<?php

$this->useJQuery();

$this->headScript()->appendScript(
	'var availabilityInfo = ' . $this->product->getAvailabilityInfo(true) . ';
    var productInfo = ' . $this->product->getProductInfo(true) . ';
	var imagesInfo = ' . $this->product->getImagesInfo(true) . ';
	var imageVariantsInfo = ' . $this->product->getImageVariantsInfo(true) . ';
    var productImagePath = "' . $this->productImagePath('l') . '";
	var thumbnailImagePath = "' . $this->productImagePath('m') . '";
	var baseUrl = "' . $this->baseUrl() .'";'
);

$this->headScript()->appendFile('sherpa/js/productdetails.js');

$this->substitutePageTitle($this->product->getFullProductName());

?>

<!-- LEFT COLUMN -->
<div id="prd-left">

	<!-- IMAGE GALLERY -->
	<div id="prd-gallery">
		<div id="prd-gallery-bg" class="clearfix">
			<div id="prd-gallery-left">
				<?php echo $this->render('productdetails/_images.phtml') ?>
			</div>
			<div id="prd-gallery-right">
				<div id="prd-gallery-icons">
					<?php
					foreach($this->product->getIcons() AS $icon):
						echo $this->productIcon($icon);
					endforeach;
					?>
				</div>
			</div>
		</div>
	</div>

</div>

<!-- RIGHT COLUMN -->
<div id="prd-right">

	<!-- CONTROLS -->
	<div id="prd-controls">
		<div id="prd-controls-bg">

			<p id="prd-controls-productname"><?php echo $this->product->getFullProductName() ?></p>
			<p>
				<span id="prd-controls-currency"><?php echo $this->config('currencyCode') ?></span> &nbsp; <span id="prd-controls-price"><?php echo $this->price($this->product->getPrice()) ?></span>
				<?php if(!$this->product->emptyOldPrice()): ?>
					<span id="prd-controls-oldprice">statt <?php echo $this->price($this->product->getOldPrice()) ?></span>
				<?php endif; ?>
			</p>

			<!-- COLORS -->
			<div id="prd-controls-colors">
				<h4>Farben</h4>
				<?php echo $this->render('productdetails/_colors.phtml') ?>
			</div>

			<!-- SIZES -->
			<div id="prd-controls-sizes">
				<h4>Grössen</h4>
				<?php echo $this->render('productdetails/_sizes.phtml') ?>
				<div style="clear: both"></div>
			</div>

			<!-- SIZE TABLE -->
			<?php if(!$this->product->emptySizeTableHtml()): ?>
				<div id="prd-controls-sizetable">
					<div id="sizetable-openlink"><a href="<?php echo $this->requestUri() ?>">Bitte Grössentabelle beachten</a></div>
					<div id="sizetable-popup">
						<div id="sizetable-popup-inner">
							<h2>Grössentabelle</h2>
							<?php echo $this->product->getSizeTableHtml() ?>
							<div id="sizetable-closelink"><a href="<?php echo $this->requestUri() ?>"><img src="sherpa/img/btn-fenster-schliessen.gif" alt="Fenster schliessen" /></a></div>
						</div>
					</div>
				</div>
			<?php endif; ?>

			<!-- SIZE INFO -->
			<?php if(!$this->product->emptySizeInfo()): ?>
			<div id="prd-controls-sizeinfo"><?php echo $this->product->getSizeInfo() ?></div>
			<?php endif; ?>

			<script type="text/javascript">
				$(document).ready(function() {

					$('#sizetable-openlink a').click(function() {
						$('#sizetable-popup').css('display', 'block');
						return false;
					});

					$('#sizetable-closelink a').click(function() {
						$('#sizetable-popup').css('display', 'none');
						return false;
					});

				});
			</script>

			<!-- QUANTITY -->
			<div id="prd-controls-quantity">
				<h4>Anzahl</h4>
				<select id="quantity" name="quantity">
					<option value="1">1</option>
					<option value="2">2</option>
					<option value="3">3</option>
					<option value="4">4</option>
					<option value="5">5</option>
					<option value="6">6</option>
					<option value="7">7</option>
					<option value="8">8</option>
					<option value="9">9</option>
				</select>
				&nbsp;
				<!-- input id="btn-addtocart" type="button" value="Produkt nicht verf&uuml;gbar" disabled="disabled" / -->
				<!-- input id="btn-addtocart" type="image" src="sherpa/img/btn-nicht-verfuegbar.gif" alt="Nicht verf&uuml;gbar" disabled="disabled" / -->
				<img id="btn-addtocart" src="sherpa/img/btn-nicht-verfuegbar.gif" alt="Nicht verf&uuml;gbar" /> <span id="prd-controls-availabilityText"></span>
			</div>

			<div style="display: none;">
				<input id="productId" type="hidden" name="productId" value="0" />
				<input id="price" type="hidden" name="price" value="0" />
				<input id="currencyCode" type="hidden" name="currencyCode" value="<?php echo $this->product->getCurrencyCode() ?>" />
				<input id="sizeId" type="hidden" name="sizeId" value="0" />
				<input id="colorId" type="hidden" name="colorId" value="0" />
			</div>
		</div>
	</div>

	<!-- DETAILS -->
	<?php echo $this->render('productdetails/_details.phtml') ?>

</div>